<template>
    <div>
        <navigationBar :bgType="3" :backType="2" navigationTitle="分享有礼" />
        <view class="content">
            <image
                src="/static/static/technician/joinUs/yqyl.png"
                class="yqyl"
                mode="scaleToFill"
            />
            <view class="clock">
                <view class="clockText"> 距离活动结束还剩 </view>
                <view class="clockNum flex align-center just-center">
                    <text class="days">{{ d }}</text>
                    天
                    <text class="hours"> {{ h }} </text>
                    时
                    <text class="minutes"> {{ m }} </text>
                    分
                    <text class="seconds"> {{ s }} </text>
                    秒
                </view>
            </view>

            <view class="card list">
                <view class="menu">
                    <image
                        src="/static/static/technician/joinUs/menu.png"
                        mode="scaleToFill"
                    />
                    <text class="title"> 邀请记录 </text>
                </view>
                <view class="tab flex align-center just-around  top-padding">
                    <text>用户</text>
                    <text>时间</text>
                </view>
                <scroll-view
                    class="items"
                    scroll-y="true"
                    v-if="list.length"
                    @scrolltolower="loadMore"
                >
                    <view
                        class="item flex align-center just-between"
                        v-for="(item, index) in list"
                        :key="index"
                    >
                        <view class="left flex align-center just-center">
                            <image
                                class="avatar"
                                :src="item.avatar"
                                mode="scaleToFill"
                            />
                            <text>{{ item.nickname }}</text>
                        </view>
                        <view class="right"> {{ item.createtime_text }} </view>
                    </view>
                </scroll-view>

                <emptyData v-if="list.length === 0" />

                <view class="btn" @click="showShare">
                    <!-- <image
                        class="btnImg"
                        src="/static/static/technician/joinUs/btn.png"
                        mode="scaleToFill"
                    /> -->
                    <view>邀请有奖</view>
                </view>
            </view>

            <view class="card rich">
                <view class="title f-30 flex align-center just-center mb-20">
                    活动规则
                </view>
                <rich-text :nodes="content"></rich-text>
            </view>
        </view>

        <view
            class="mask"
            v-if="share || showActivity_img"
            @click.stop="close"
        ></view>
        <view class="share flex align-center just-around" v-if="share">
            <view
                class="shareWechat flex column align-center just-center"
                @click="onWechat"
            >
                <image
                    class="shareIcon"
                    src="/static/static/technician/joinUs/wechat.png"
                    mode="scaleToFill"
                />
                <text class="title">分享到微信</text>
            </view>
            <view
                class="wechat-moments flex column align-center just-center"
                @click="onWechatMoments"
            >
                <image
                    class="shareIcon"
                    src="/static/static/technician/joinUs/wechat-moments.png"
                    mode="scaleToFill"
                />
                <text class="title">分享到朋友圈</text>
            </view>
        </view>
        <view class="modal" v-if="showActivity_img">
            <image :src="activity_img" mode="scaleToFill" />
            <text class="tip">请长按保存海报进行分享</text>
        </view>
    </div>
</template>

<script>
// import jWeixin from "";
jWeixin.ready(() => {});
import { inviteList } from "@/API/API/recruit.js";
import emptyData from "@/components/components/emptyData/emptyData.vue"; 
export default {
    data() {
        return {
            d: "00",
            h: "00",
            m: "00",
            s: "00",

            timer: null,

            time: 20041,

            content:
                "<p>1,文案规则</p><p>2,文案规则</p><p>3,文案规则</p><p>4,文案规则</p>",

            share: false,

            list: [],

            page: 1,
            total: 0,
            activity_img: "",

            showActivity_img: false,
        };
    },

    onLoad() {
        this.timer = setInterval(() => {
            this.countDown();
        }, 1000);
        this.countDown();
        this.getData();
    },

    methods: {
        loadMore() {
            if (this.total <= this.list.length) return;
            this.page++;
            this.getData();
        },
        // 倒计时
        countDown() {
            let d = Math.floor(this.time / 60 / 60 / 24);
            let h = Math.floor((this.time / 60 / 60) % 24);
            let m = Math.floor((this.time / 60) % 60);
            let s = Math.floor(this.time % 60);
            this.d = d.toString().padStart(2, "0");
            this.h = h.toString().padStart(2, "0");
            this.m = m.toString().padStart(2, "0");
            this.s = s.toString().padStart(2, "0");

            if (this.time > 0) {
                this.time--;
            } else {
                clearInterval(this.timer);
            }
        },
        showShare() {
            this.share = true;
        },
        close() {
            this.share = false;
            this.showActivity_img = false;
        },
        // 分享到微信
        onWechat() {
            this.showActivity_img = true;
            this.share = false;
            // #ifdef APP-PLUS
            jWeixin.onMenuShareTimeline({
                title: "邀请有奖",
            })
            // #endif
        },
        // 分享到朋友圈
        onWechatMoments() {
            this.showActivity_img = true;
            this.share = false;
        },
        getData() {
            inviteList({ page: this.page }).then((res) => {
                this.list.push(...res.data.list.data);
                this.content = res.data.ActivityRules;
                this.time = res.data.RemainingTime;
                this.total = res.data.list.total;
                this.activity_img = res.data.activity_img;
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.content {
    width: 100vw;
    padding-bottom: 30rpx;
    background: url("../../../static/static/technician/joinUs/shareBg.png") no-repeat;
    background-size: 100% 1356rpx;
    background-color: #fa3a2f;
    min-height: 100vh;

    .yqyl {
        display: block;
        width: 528rpx;
        height: 620rpx;
        margin: 0 auto;
        padding: 80rpx 0 0 0;
    }

    .clock {
        text-align: center;
        color: #fff;
        font-size: 32rpx;
        .clockText {
            line-height: 1.5;
            margin: 20rpx 0;
        }
        .clockNum {
            line-height: 1.5;
            font-size: 26rpx;
            font-weight: bold;
            .days,
            .hours,
            .minutes,
            .seconds {
                margin: 0 10rpx;
                font-size: 26rpx;
                font-weight: bold;
                background: white;
                color: #d6291f;
                padding: 10rpx;
            }
        }
    }

    .list {
        position: relative;
        padding-top: 100rpx;
        .menu {
            position: absolute;
            top: -24rpx;
            left: 50%;
            transform: translateX(-50%);
            > image {
                width: 396rpx;
                height: 92rpx;
            }
            .title {
                font-size: 32rpx;
                line-height: 1.5;
                position: absolute;
                top: 18rpx;
                left: 50%;
                transform: translateX(-50%);
            }
        }
         .top-padding{
            padding-bottom: 40rpx;
        }
        .items {
            font-size: 28rpx;
            height: 500rpx;
            overflow: auto;
            .item {
                padding: 20rpx 0;
                border-bottom: 2rpx solid #ececec;

                .left {
                    .avatar {
                        width: 60rpx;
                        height: 60rpx;
                        margin-right: 10rpx;
                        border-radius: 50%;
                    }
                    text {
                        max-width: 200rpx;
                    }
                }
            }
            .item:last-child {
                border-bottom: none;
            }
        }

        .btn {
            width: 100%;
            height: 120rpx;
            // position: relative;
            background: url("../../../static/static/technician/joinUs/btn.png") no-repeat;
            background-size: 462rpx 100%;
            background-position: center;
            // .btnImg {
            //     width: 462rpx;
            //     height: 120rpx;
            //     position: absolute;
            //     top: 50%;
            //     left: 50%;
            //     transform: translate(-50%, -50%);
            // }
            .btnImg:active {
                opacity: 0.7;
            }
            view {
                // position: absolute;
                // left: 50%;
                // top: 45%;
                // transform: translate(-50%, -50%);
                font-size: 32rpx;
                line-height: 110rpx;
                text-align: center;
            }
        }
    }
}

.card {
    width: 92%;
    height: 100%;
    margin: 50rpx auto 0 auto;
    background: white;
    border-radius: 20rpx;
    padding: 30rpx;
    box-sizing: border-box;
}

.mb-20 {
    margin-bottom: 20rpx;
}

.mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.share {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    padding: 30rpx;
    box-sizing: border-box;
    z-index: 99999;
    .shareIcon {
        width: 64rpx;
        height: 64rpx;
        margin-bottom: 20rpx;
    }
}

.shareWechat,
.wechat-moments {
    background: #fff;
    width: 50%;
    padding: 20rpx 0;
    transition: all 0.2s;
}

.shareWechat:active,
.wechat-moments:active {
    background: #eee;
    transition: all 0.1s;
}

/deep/.rich {
    p {
        font-size: 28rpx;
        line-height: 1.5;
    }
}

.modal {
    width: 80%;
    height: 60vh;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    text-align: center;

    image {
        width: 100%;
        height: 100%;
    }

    .tip{
        position: absolute;
        width: 100%;
        bottom: -80rpx;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 32rpx;
        line-height: 1.5;
        color: #fff;
    }
}
</style>